<template>
    <div>
        <div class="string-header">

            <el-tooltip class="item" effect="light" v-if="disableEdit" :content="tooltipContent" placement="top">
                <el-input v-model="keyInfo.key" :disabled="disableEdit" :placeholder="$t('aside.PleaseEnter')">
                    <template slot="prepend">{{keyType}}</template>
                    <i slot="suffix" class="el-icon-check el-input__icon cursor-pointer"></i>
                </el-input>
            </el-tooltip>
           
           <el-input v-else v-model="keyInfo.key" :placeholder="$t('aside.PleaseEnter')">
                <template slot="prepend">{{keyType}}</template>
                <i slot="suffix" class="el-icon-check el-input__icon cursor-pointer" @click="keyReName"></i>
            </el-input>

            <el-input v-model="keyInfo.ttl" :placeholder="$t('aside.PleaseEnter')">
                <template slot="prepend">TTL(seconds)</template>
                <i slot="suffix" class="el-icon-check el-input__icon cursor-pointer" @click="setTTl"></i>
            </el-input>

            <el-button :title="$t('publicFeedback.refush')" type="success" icon="el-icon-refresh" circle @click="refushKey"></el-button>
            <el-button :title="$t('publicFeedback.delete')" type="danger" icon="el-icon-delete" circle @click="deleteKey"></el-button>
            <el-switch
                :title="$t('publicFeedback.autoRefushTTL')"
                v-model="autoRefushTTL"
                active-color="#13ce66"
                inactive-color="#ff4949">
            </el-switch>
        </div>
    </div>
</template>

<script>
export default {
    props:["data","keyType"],
    data(){
        return {
            autoRefushTTL:false,
            tooltipContent:this.$t('publicFeedback.notSaveKeyDontModifyKeyName'),
            disableEdit:true,
            keyInfo:{
                key:'',
                ttl:-1
            },
            timer:null
        }
    },
    created(){
        this.init();
    },
    methods:{
        //页面加载
        init(){
            this.keyInfo.key=this.data.key
            this.disableEdit=this.data.type==="addKey"
            if(this.data.redisClient.constructor.name==='Cluster'){
                this.disableEdit=true
                this.tooltipContent=this.$t('publicFeedback.disableReName')
            }
            this.getTTl();
        },
        //获取过期时间
        getTTl(){
            this.data.redisClient.ttl(this.keyInfo.key).then(res=>{
                this.keyInfo.ttl=(res===-2?0:res);
            })
        },
        //刷新key
        refushKey(){
            this.init();
            this.$parent.init();
            this.$message.success({
                message:this.$t('publicFeedback.refushSuccess')
            })
        },
        //删除key
        deleteKey(){
            this.$confirm(this.$t("publicFeedback.confirmDeletionTips")+this.keyInfo.key+" ?",this.$t("aside.tips"),{
                confirmButtonText: this.$t('aside.determine'),
                cancelButtonText: this.$t('aside.cancel'),
                cancelButtonClass: "btn-custom-cancel",
                type: 'warning'
            }).then(()=>{
                //这里执行删除操作
                this.data.redisClient.del(this.keyInfo.key).then((res)=>{
                    if(res===1){
                        this.$eventBus.$emit("refushKeyList",{client:this.data.redisClient,type:"del",key:this.keyInfo.key})
                        this.$eventBus.$emit("closeCurrentTab")
                    }
                }).catch((e)=>{
                    this.$message.error({
                        message:e.message
                    })
                })
            }).catch(()=>{})
        },
        //重命名键
        keyReName(){
            if(this.keyInfo.key&&this.data.key!==this.keyInfo.key){
                this.data.redisClient.rename(this.data.key,this.keyInfo.key).then((res)=>{
                    if(res==="OK"){
                        this.$eventBus.$emit("modifyKeyName",this.data,this.keyInfo.key)
                        this.$message.success({
                            message:this.$t('publicFeedback.setSuccess')
                        })
                    }
                }).catch((e)=>{
                    this.$message.error({
                        message:e.message
                    })
                })
            }
        },
        //重新设置过期时间
        setTTl(){
            if(this.keyInfo.ttl){
                this.data.redisClient.expire(this.data.key,this.keyInfo.ttl).then((res)=>{
                    if(res===1){
                        this.$message.success({
                            message:this.$t('publicFeedback.setSuccess')
                        })
                        this.autoRefushTTL=true;
                    }
                }).catch((e)=>{
                    this.$message.error({
                        message:e.message
                    })
                })
            }
        }
    },
    watch:{
        data(newValue,oldValue){
            this.init()
        },
        autoRefushTTL(newValue,oldValue){
            if(newValue){
                this.timer=setInterval(()=>{this.getTTl()},1000)
            }else{
                clearInterval(this.timer)
            }
        }
    }
}
</script>

<style scoped>
    .string-header .el-input{
        width: 30%;
    }
    .string-header .el-button+.el-button{
        margin: 0px;
    }
    .string-header .el-button.is-circle{
        padding: 6px;
        margin: 0px 5px;
    }
</style>